



<!--
任务描述 任务流程图

:workflowId
:taskdesc
:heightImg
-->



<template>
    <div v-show="workflowId" class=" imgbox" >

       <div class="contentBox">
         <Input v-model="taskdesc" type="textarea" :rows="5"  disabled   placeholder="流程描述" />
         <div style="margin: 10px;overflow-y: auto" :style="{height:heightImg+'px'}">
           <img
               :src="pictureSrc"
               style="width: 100%;"
               @click="clickImg($event)"
           />
         </div>
       </div>


      <production-lineGraph
          ref="refProductionLineGraphModal"
          v-show="productionLineGraphModal"
          :modalShow="productionLineGraphModal"
          @close="productionLineGraphModalClose"
      ></production-lineGraph>

    </div>

</template>

<script>
import ProductionLineGraph from "./processingGraph";
export default {
  name: "img",
  props: {
    workflowId:{
      type: String|Number,
      default(){
        return "";
      },
    },
    taskdesc:{
      type: String,
    },
    heightImg:{
      type: Number,
      default() {
        return 550;
      }
    }

  },
  components: {ProductionLineGraph},
  data(){
    return{
      pictureSrc: "",
      productionLineGraphModal: false,
    }
  },
  methods:{
    //对应流程线的流程图
    displayProductionLineGraph() {
      let workFlowId = this.workflowId;
      let path = this.$api.processingApi.loopUpGraph + workFlowId + "/findPicture"+"?t="+new Date();
      this.pictureSrc = path;
    },
    clickImg(e) {
      this.productionLineGraphModal = true;
      this.$refs.refProductionLineGraphModal.displayProductionLineGraph(this.pictureSrc);
    },
    productionLineGraphModalClose() {
      this.productionLineGraphModal = false;
    },
  },
  watch:{
    workflowId: {
      handler(newData) {
        if (!newData) return
        this.displayProductionLineGraph()
      },
      immediate: true

    },

  }
}
</script>

<style scoped lang="scss">
.imgbox {
  width: 100%;
  height: 100%;
  background-color: #fbfbfb;
  border: 1px solid #cccccc;
  padding: 10px;
}
.contentBox {
  display: flex;
  flex-direction: column;
}
</style>